import React, { Component } from 'react';
class Search extends Component {
    state = {
        taskname: '',
        tasklist: localStorage.getItem('tasklist')?JSON.parse(localStorage.getItem('tasklist')):[]
    }
    handleChange(e) {
        this.setState({
            taskname: e.target.value,
        })
    }
    myClick() {
        this.state.tasklist.push(this.state.taskname.trim())
        this.setState({
            tasklist: this.state.tasklist
        })
        localStorage.setItem('tasklist', JSON.stringify(this.state.tasklist))
        this.props.history.push({ pathname: '/index/goods', state: {taskname: this.state.taskname } })
    }
    render() {
        return (
            <div className='search'>
                {/* 头部 */}
                <div className="top">
                    <span className='iconfont icon-fanhuijiantou' onClick={() => { this.props.history.goBack() }}></span>
                    <span>搜索</span>
                </div>
                {/* 输入框 */}
                <div className="form">
                    <div className="input">
                        <span className="iconfont icon-sousuo"></span>
                        <input type="text" placeholder="搜索店铺内商品" name='taskname' defaultValue={this.state.taskname} onChange={(e) => { this.handleChange(e) }} />
                    </div>
                    <span onClick={() => { this.myClick() }}>搜索</span>
                </div>
                {/* 历史搜索 */}
                <div className="history">
                    <div className="tittle">
                        <span>最近搜索</span>
                        <span className="iconfont icon-shanchu"></span>
                    </div>
                    <ul>

                        {
                            this.state.tasklist.map((item, index) => {
                                return (<li key={index}>{item}</li>)

                            })
                        }
                    </ul>
                </div>
                {/* 搜索发现 */}
                <div className="find">
                    <p>热门搜索</p>
                    <ul>
                        <li>雅诗兰黛</li>
                        <li>兰蔻</li>
                        <li>黛珂</li>
                        <li>娇韵诗</li>
                        <li>面霜</li>
                        <li>科颜氏</li>
                        <li>眼霜</li>
                        <li>香水</li>
                        <li>面膜</li>
                    </ul>
                </div>
            </div>
        );
    }
}

export default Search;